<template>
  <CommonCard title="今日订单" :value="(numberFormat(orderToday) as string)">
    <!-- 对于默认插槽来说，直接写在这里面的结构也相当于是默认插槽的结构 -->
    <div ref="lineChartRef" style="width:100%;height:100%"></div>
    <template #footer>
      <div>昨日订单量 <span class="emphasis">{{moneyFormat(orderLastDay)}}</span></div>
    </template>
  </CommonCard>
</template>

<script lang="ts">
export default {
  name: 'TodaySales'
};
</script>
<script lang="ts" setup>
import { ref, onMounted, computed,watch } from 'vue';
import CommonCard from './CommonCard.vue';
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportInfoStore = useReportDataStore();
const lineChartRef = ref();

let lineChart: EChartsType;
// 使用计算属性精间一下数据项
// 1. 今日订单量
const orderToday = computed(() => reportInfoStore.reportInfo.orderToday);

// 2.  昨日订单量
const orderLastDay = computed(() => reportInfoStore.reportInfo.orderLastDay);
// 3. y轴的数据
const orderTrend = computed(() => reportInfoStore.reportInfo.orderTrend);

// 4. x轴的数据
const orderTrendAxis = computed(() => reportInfoStore.reportInfo.orderTrendAxis);

const getOption = () => {
  return {
    xAxis: {
      boundaryGap: false, // 两侧不留白
      // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] // x轴数据列表
      data: orderTrendAxis.value
    },
    yAxis: {
      show: false
    },
    tooltip: {
      trigger: 'axis', // 触发规则 自动精匹配节点处显示
      confine: true // 只在屏幕内显示
    },
    series: {
      // 如果只有一个图形的话 此时series可以是一个对象
      type: 'line',
      // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
      data: orderTrend.value,
      // 设置折线为平滑的曲线
      smooth: true,
      // 折点的样式
      itemStyle: {
        opacity: 0
      },
      // 线的设置 opacity:0 让线不显示
      lineStyle: {
        opacity: 0
      },
      // 区域填充色
      areaStyle: {
        color: 'purple'
      }
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    }
  };
};

// 1. 当页面组件挂载完毕的时候，来生成对应的图形
onMounted(() => {
  // 1.1 先初始化生成一个图形对象
  lineChart = echarts.init(lineChartRef.value);
  // 1.2 根据参数来生成图形
  // lineChart.setOption(getOption());

  window.addEventListener('resize', () => {
    // 当页面尺寸发生变化的时候,要重新根据参数来生成
    // lineChart.setOption(getOption())
    lineChart.resize()
  })
});

// 为了让重新刷新浏览器也能够重新看到对应的图像效果，此时需要添加一个监听器
// 当发送请求成功，数据真正的保存到了store当中后，再映射到当前组件时再生成图片
watch(orderToday, () => {
  lineChart.setOption(getOption());
})
</script>

<style>
</style>